<template>
    <div class="content">
     <div class="left-column">
      <div class="module">
        <div class="leftt-column">
      <h2>第二次国内革命战争时期</h2>
      <ul>
       <li @click="selectEvent(0, 'first')">南昌起义</li>
       <li @click="selectEvent(1, 'first')">八七会议</li>
       <li @click="selectEvent(2, 'first')">秋收起义与井冈山革命根据地的建立</li>
       <li @click="selectEvent(3, 'first')">土地革命</li>
       <li @click="selectEvent(4, 'first')">红军的反“围剿”斗争</li>
      </ul>
      </div>
     <div class="right-column">
      <h2>事件详情</h2>
      <div class="event-card">
       <img v-if="selectedEventIndex.first === null" src="../../../../../public/202.webp" alt="Default Image">
       <p v-if="selectedEventIndex.first === 0">1927年8月1日，以周恩来为书记的前敌委员会，打响了武装反抗国民党的第一枪。这是中国共产党独立领导革命战争、创建人民军队和武装夺取政权的开端。</p>
       <p v-if="selectedEventIndex.first === 1">八七会议是中国共产党历史上的一次重要会议，1927年8月7日，中共中央在汉口召开紧急会议，正式确定了“土地革命和武装反抗中国国民党反动派”的总方针。</p>
       <p v-if="selectedEventIndex.first === 2">秋收起义是中国共产党领导的一次重要起义，1927年9月9日，毛泽东领导的湘赣边界秋收起义爆发。确立了“党领导军队”的基本原则,创建了中国第一个农村革命根据地。</p>
       <p v-if="selectedEventIndex.first === 3">土地革命是中国共产党在革命根据地进行的一项重要政策，旨在解决农民土地问题。是在革命根据地开展打地主、分田地、废除封建剥削和债务，满足农民土地要求的革命。</p>
       <p v-if="selectedEventIndex.first === 4">从1930年12月开始，至1933年4月，蒋介石对革命根据地先后发动了四次“围剿”。工农红军英勇奋战，打退了敌人的进攻，取得了四次反“围剿”的胜利。</p>
      </div>
     </div>
     </div>
     </div>
     
     <div class="left1-column">
      <div class="module">
        <div class="left1t-column">
      <h2>全面抗日战争的爆发</h2>
      <ul>
       <li @click="selectEvent(0, 'second')">西安事变的发生</li>
       <li @click="selectEvent(1, 'second')">中国共产党的和平解决方针</li>
       <li @click="selectEvent(2, 'second')">国民党五届三中全会</li>
       <li @click="selectEvent(3, 'second')">《中共中央为公布国共合作宣言》的发表</li>
       <li @click="selectEvent(4, 'second')">党的好干部——焦裕禄</li>
      </ul>
      </div>
      <div class="right1-column">
      <h2>事件详情</h2>
      <div class="event-card">
       <img v-if="selectedEventIndex.second === null" src="../../../../../public/204.webp" alt="Default Image">
       <p v-if="selectedEventIndex.second === 0">西安事变是国共两党合作的一个重要转折点，标志着第二次国共合作的开始。</p>
       <p v-if="selectedEventIndex.second === 1">中国共产党提出了和平解决西安事变的方针，为国共合作奠定了基础。</p>
       <p v-if="selectedEventIndex.second === 2">国民党五届三中全会是国民党内部的一个重要会议，为国共合作提供了政治基础。</p>
       <p v-if="selectedEventIndex.second === 3">《中共中央为公布国共合作宣言》的发表，标志着国共两党正式合作抗日。</p>
       <p v-if="selectedEventIndex.second === 4">焦裕禄是中国共产党的优秀干部，他的事迹激励了一代又一代人。</p>
      </div>
     </div>
     </div>
     </div>
     
     <div class="left2-column">
      <div class="module">
        <div class="left2t-column">
      <h2>国共第二次合作</h2>
      <ul>
       <li @click="selectEvent(0, 'third')">卢沟桥事变</li>
       <li @click="selectEvent(1, 'third')">淞沪会战</li>
       <li @click="selectEvent(2, 'third')">国共合作宣言</li>
       <li @click="selectEvent(3, 'third')">太原会战</li>
       <li @click="selectEvent(4, 'third')">南京大屠杀</li>
      </ul>
      </div>
      <div class="right2-column">
      <h2>事件详情</h2>
      <div class="event-card">
       <img v-if="selectedEventIndex.third === null" src="../../../../../public/203.webp" alt="Default Image">
       <p v-if="selectedEventIndex.third === 0">卢沟桥事变是全面抗日战争的爆发点，标志着中国全面抗战的开始。</p>
       <p v-if="selectedEventIndex.third === 1">淞沪会战是全面抗战初期的一场重要战役，展现了中国军队的顽强抵抗。</p>
       <p v-if="selectedEventIndex.third === 2">国共合作宣言的发表，标志着国共两党正式合作抗日。</p>
       <p v-if="selectedEventIndex.third === 3">太原会战是全面抗战初期的一场重要战役，对华北战局产生了重要影响。</p>
       <p v-if="selectedEventIndex.third === 4">南京大屠杀是日本军队在中国南京犯下的严重战争罪行，造成了大量平民和战俘的死亡。</p>
     </div>
     </div>
     </div>
     </div>

     <div class="left3-column">
      <div class="module">
        <div class="left3t-column">
      <h2>日本侵华与抗日救亡运动</h2>
      <ul>
       <li @click="selectEvent(0, 'forth')">九一八事变</li>
       <li @click="selectEvent(1, 'forth')">一二九运动</li>
       <li @click="selectEvent(2, 'forth')">七七事变</li>
       <li @click="selectEvent(3, 'forth')">八一宣言</li>
       <li @click="selectEvent(4, 'forth')">西安事变</li>
   </ul>
   </div>
   <div class="right3-column">
   <h2>事件详情</h2>
   <div class="event-card">
   <img v-if="selectedEventIndex.forth === null" src="../../../../../public/205.webp" alt="Default Image">
    <p v-if="selectedEventIndex.forth === 0">1931年9月18日，日本关东军在中国东北制造了九一八事变，炮轰东北军驻地北大营和沈阳城，标志着日本对中国东北的全面侵略开始。</p>
    <p v-if="selectedEventIndex.forth === 1">1935年12月9日，北平学生在中国共产党的领导下举行声势浩大的抗日游行，遭到国民党军警镇压，由此开始的一二·九运动迅速波及全国。</p>
    <p v-if="selectedEventIndex.forth === 2">1937年7月7日，日军在北平西南的卢沟桥制造七七事变，中国守军奋起抵抗，全国抗日战争从此开始。</p>
       <p v-if="selectedEventIndex.forth === 3">1935年8月1日，中国共产党发表《为抗日救国告全体同胞书》，通称《八一宣言》，号召停止内战，一致抗日，这一宣言对动员全国人民的抗日救亡运动起到了重要作用。</p>
       <p v-if="selectedEventIndex.forth === 4">1936年12月12日，国民党爱国将领张学良、杨虎城发动西安事变，逼蒋停止内战、联共抗日，这一事件对国共两党合作抗日起到了关键性的推动作用。</p>
      </div>
     </div>
     </div>
    </div> 
    </div> 
  </template>
  
  
  <script>
  export default {
   name: 'Content',
   data() {
    return {
     selectedEventIndex: {
      first: null,
      second: null,
      third: null,
      forth: null
     }
    };
   },
   methods: {
    selectEvent(index, section) {
     this.selectedEventIndex[section] = index;
    }
   }
  }
  </script>
  
  <style scoped>
.content {
   display: flex;
   padding: 20px;
   justify-content: center;
   flex-wrap: wrap;
}
.module {
   display: flex;
   justify-content: space-between;
}
.left-column, .left1-column, .left2-column , .left3-column{
   width: 600px;
   background-color: white;
   padding: 20px;
   margin: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.right-column, .right1-column, .right2-column , .right3-column{
   width: 35%;
   background-color: white;
   padding: 20px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.leftt-column, .left1t-column, .left2t-column , .left3t-column{
   width: 65%;
   padding: 20px;
   background-color: white;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
   color: #b71c1c;
}
ul {
   list-style-type: none;
   padding: 0;
}
li {
   margin: 10px 0;
   cursor: pointer;
}
.event-card {
   margin-top: 20px;
}
img {
   width: 180px;
   height: 130px;
}
  </style>
  